<template>
  <div>
    <navbar></navbar>
    <div style="padding: 20px"></div>
    <div style="padding: 30px">
      <div class="columns">
        <div class="column">
          <b-carousel
            :autoplay="false"
            with-carousel-list
            :indicator="false"
            :overlay="gallery"
            @click="switchGallery(true)"
          >
            <b-carousel-item v-for="(item, i) in images" :key="i">
              <figure class="image">
                <img v-lazy="item.image" />
              </figure>
            </b-carousel-item>
            <span
              v-if="gallery"
              @click="switchGallery(false)"
              class="modal-close is-large"
            />
            <template slot="list" slot-scope="props">
              <b-carousel-list
                v-model="props.active"
                :data="images"
                v-bind="al"
                @switch="props.switch($event, false)"
                as-indicator
              />
            </template>
          </b-carousel>
        </div>
        <div class="column is-one-quarter">
          <socailInfo></socailInfo>

          <div class="card" v-if="desc != null">
            <header class="card-header">
              <p class="card-header-title">
                {{ desc.raw.title }}
              </p>
              <button class="card-header-icon" @click="share()">
                <i class="bx bx-share-alt" aria-hidden="true"></i>
              </button>
            </header>
            <div class="card-content">
              <div class="content">
                {{ desc.raw.text }}
                <br />
                点赞情况：{{ lovenum }}
                <time
                  datetime="2016-1-1"
                  style="font-size: 6px; float: right"
                  >{{
                    desc.raw.date | dateformat("YYYY年MM月DD日 HH:mm")
                  }}</time
                >
              </div>
            </div>
            <footer class="card-footer">
              <a class="card-footer-item" @click="niceJob">
                <b-tooltip label="好活" type="is-light" position="is-top">
                  <template>👍</template>
                </b-tooltip>
              </a>

              <a class="card-footer-item" @click="badJob">
                <b-tooltip label="烂活" type="is-light" position="is-top">
                  <template>🚔</template>
                </b-tooltip>
              </a>
            </footer>
          </div>
          <br />
          <b-button
            type="is-warning"
            label="删除"
            expanded
            v-if="test()"
            @click="del()"
          ></b-button>
          <replyPost></replyPost>
        </div>
      </div>
      <replyExm></replyExm>
    </div>

    <b-modal v-model="isCardModalActive" :width="640" scroll="keep">
      <div class="modal-card" style="width: auto">
        <header class="modal-card-head">
          <p class="modal-card-title">受限制页面</p>
          <button type="button" class="delete" @click="$emit('close')" />
        </header>
        <section class="modal-card-body">
          <b-field label="访问密钥">
            <b-input type="text" v-model="token" placeholder="token" required>
            </b-input>
          </b-field>
        </section>
        <footer class="modal-card-foot">
          <button class="button" type="button" @click="$emit('close')">
            Close
          </button>
          <button class="button is-primary" @click="tokenSubmit">提交</button>
        </footer>
      </div>
    </b-modal>

    <b-modal v-model="isShare">
      <div class="card">
            <b-field label="分享链接">
            <b-input  v-model="shareUrl" expanded></b-input>
            <b-button class="button is-primary" icon-left="share">分享</b-button>
   
        </b-field>
      </div>
        </b-modal>
  </div>
</template>

<script>
import socailInfo from "../components/userCom/socailInfo.vue";
import navbar from "../components/common/navbar.vue";
import replyExm from "../components/reply/replyExm.vue";
import replyPost from "../components/reply/replyPost.vue";
export default {
  components: { navbar, socailInfo, replyExm, replyPost },
  data() {
    return {
      desc: null,
      gallery: false,
      isShare : false,
      shareUrl :"",
      al: {
        hasGrayscale: true,
        itemsToShow: 2,
        breakpoints: {
          768: {
            hasGrayscale: false,
            itemsToShow: 4,
          },
          960: {
            hasGrayscale: true,
            itemsToShow: 6,
          },
        },
      },
      gid: "",
      lovenum: "",
      images: [],
      token: "",
      isCardModalActive: false,
      Galleryuid: "",
    };
  },
  methods: {
    share() {
      this.shareUrl = window.location.href;
      this.isShare = true;
    },
    test() {
      if (this.Galleryuid == localStorage.getItem("uid")) {
        return true;
      }
      if (
        localStorage.getItem("level") == "admin" ||
        localStorage.getItem("level") == "root"
      ) {
        return true;
      }
      return false;
    },
    //删除图片
    async del() {
      console.log(this.gallery.raw);
      let temp = await this.$http.delete(
        "/go/pic/del/" + this.$route.query.gid,
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        }
      );
      console.log(temp.data);
      if (temp.data.status != 20000) {
        this.$vs.notification({
          title: "删除有问题",
        });
      }
      temp = await this.$http.delete(
        "/api/gallery/delete/" + this.$route.query.gid,
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        }
      );
      console.log(temp.data);
      if (temp.data.status == 20000) {
        this.$vs.notification({
          title: "删除成功",
        });
        this.$router.push("/AllGallery");
      }
    },
    //点赞
    async niceJob() {
      let res = await this.$http.post(
        "/api/gallery/niceJob",
        {},
        {
          params: {
            gid: this.$route.query.gid,
          },
          headers: {
            pass: "",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        }
      );
      console.log(res.data);
      if (res.data.status == 40000) {
        this.$vs.notification({
          title: "不要重复点赞",
        });
      } else if (res.data.status == 20000) {
        this.lovenum = (+this.lovenum + 1).toString();
        this.$vs.notification({
          title: "点赞成功",
        });
      }
    },
    //点踩
    async badJob() {
      let res = await this.$http.post(
        "/api/gallery/badJob",
        {},
        {
          params: {
            gid: this.$route.query.gid,
          },
          headers: {
            pass: "",
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        }
      );
      console.log(res.data);
      if (res.data.status == 40000) {
        this.$vs.notification({
          title: "不要重复点踩",
        });
      } else if (res.data.status == 20000) {
        this.lovenum = (+this.lovenum - 1).toString();

        this.$vs.notification({
          title: "点踩成功",
        });
      }
    },
    getGid() {
      return this.$route.query.gid;
    },
    getGalleryUid() {
      if (this.Galleryuid != "") {
        return new Promise((resolve) => {
          resolve(this.Galleryuid);
        });
      }
      let self = this;
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(self.Galleryuid);
        }, 300);
      });
    },
    async tokenSubmit() {
      let res = await this.$http.post(
        "/api/gallery/view/" + this.$route.query.gid,
        {
          token: this.token,
        }
      );
      if (res.data.status == 20000) {
        this.Galleryuid = res.data.raw.userId;
        this.images = res.data.raw.images;
        this.desc = res.data;
        this.isCardModalActive = false;
      } else {
        return this.$buefy.toast.open("请检查该密钥是否有权限访问");
      }
    },
    GoDown() {
      window.scrollTo(0, document.documentElement.clientHeight * 2);
    },
    GoUp() {
      let nowTop =
        document.body.scrollTop || document.documentElement.scrollTop; // 获取当前滚动条位置
      if (nowTop > 0) {
        window.requestAnimationFrame(this.GoUp);
        window.scrollTo(0, nowTop - nowTop / 50);
      }
    },
    switchGallery(value) {
      this.gallery = value;
      if (value) {
        document.documentElement.classList.add("is-clipped");
      } else {
        document.documentElement.classList.remove("is-clipped");
      }
    },
  },
  async beforeCreate() {
    //页号问题，少了一页
    this.gid = this.$route.query.gid;
    if ((await localStorage.getItem("token")) == null) {
      return (this.isCardModalActive = true);
    }
    try {
      let res = await this.$http.get(
        "/api/gallery/view/" + this.$route.query.gid,
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      this.Galleryuid = res.data.raw.userId;
      this.images = res.data.raw.images;
      this.desc = res.data;
    } catch (error) {
      console.log(error);
      // return (this.isCardModalActive = true);
    }
    let res = await this.$http.get("/api/gallery/niceCount", {
      params: {
        gid: this.$route.query.gid,
      },
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    console.log(res.data);
    if (res.data.status == 40000) {
      this.lovenum = "0";
    } else if (res.data.status == 20000) {
      this.lovenum = res.data.nice.toString();
    }
  },
};
</script>

<style>
</style>